<template>
	<view class="pages">
		<view class="two">
			<view class="tops">
				<view class="top">
					<view class="left" v-if="goodsData.shop" @tap="toShopDetail(goodsData.shop.id)">
						<image :src="$func.showImg(goodsData.shop.avatar)" mode="scaleToFill" />
						<view class="name">{{goodsData.shop.shopname}}</view>
					</view>
					<view class="right">
						<view class="love" :class="{ followed: goodsData.shop.isFollow }"
							@click="toggleFollow(goodsData)">
							{{ goodsData.shop.isFollow ? "已关注" : "+关注" }}
						</view>
						<view class="share" @click="open">分享商品</view>
						<uni-popup class="popup" ref="popup" type="center"
							:style="{ 'border-radius': '5px','background':'rgba(0,0,0,.5)' }">
							<view class="pops" style="
							  width: 630rpx;
							  height: 1000rpx;
							  border-radius: 5px;
							  background-color: #fff;
							">
								<!-- <view class="peo">
									<image :src="$func.showImg(goodsData.image)" mode="scaleToFill" />
									<view class="prdt">
										<p>{{goodsData.title}}</p>
										<text>{{goodsData.description}}</text>
									</view>
								</view>
								<view class="bigimg">
									<image :src="$func.showImg(goodsData.image)" mode="scaleToFill" />
								</view>
								<view class="bots">
									<view class="bot">
										<text>{{goodsData.title}}</text>
										<view class="twos">
											<view class="lfs">
												<text>￥ <span>{{goodsData.price}}</span></text>
												<p>长按识别或扫，扫描二维码</p>
											</view>
											<view class="rigs">
												<image :src="poster"></image>
											</view>
										</view>
									</view>
								</view> -->
								<image :src="$func.showImg(poster)"></image>
								<view class="bottons" v-if="poster">
									<a :href="$func.showImg(poster)" target="_blank" style="text-decoration: none;">
										<view class="btn1" @click="downloadPoster">保存海报分享</view>
									</a>
									<view class="btn2" @click="copyShareUrl">复制链接分享</view>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
			<view class="contents">
				<view class="title">{{goodsData.title}}</view>

				<view class="times">
					<view class="time">活动时间：<span>{{goodsData.group_end_time}}</span>后结束
					</view>
				</view>

				<view class="content">
					<uParse :html="goodsData.content" />
				</view>
			</view>



			<view class="wrap-image-list" v-if="isShowAllImage || goodsData.content.length < 100">
				<block v-for="(item, index) in goodsData.images" :key="index">
					<image class="img-item" mode="widthFix" :src="$func.showImg(item)" />
				</block>
			</view>

			<view class="wrap-show-img-bg" @click.stop="isShowAllImage = !isShowAllImage"
				v-if="goodsData.content.length >= 100">
				{{ isShowAllImage === true ? '收起详情' : '展开全部详情' }}
			</view>
		</view>

		<view class="pictures">
			<view class="imgs">
				<!-- <view class="showimg">
					<image src="../../static/images/supermarket/show.png" mode="scaleToFill" />
				</view> -->
				<!-- <view class="unshowimg" v-if="isExpanded">
					<image src="../../static/images/supermarket/show1.png" mode="scaleToFill" />
				</view> -->
				<!-- <view class="showtext" :class="{ expanded: isExpanded }" @click="toggleExpand">
					{{ isExpanded ? "收起详情" : "展开全部详情" }}
				</view> -->
			</view>
		</view>
		<view class="products">
			<view class="names">团购商品</view>
			<view class="product">
				<image :src="$func.showImg(goodsData.image)" mode="aspectFill" />
				<view class="compute">
					<view class="tits">{{goodsData.title}}
					</view>
					<view class="info">已团<span>{{goodsData.tuanNum}}</span>人</view>
					<view class="buy">
						<view class="prc">￥<span>{{goodsData.price}}</span></view>
						<!-- <view class="coms"><uv-number-box v-model="value" @change="valChange"></uv-number-box></view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="history">
			<view class="tit">跟团记录</view>
			<view class="infos" v-for="(item,index) in logList" :key="item">
				<view class="nums">{{index+1}}</view>
				<view class="people">
					<view class="tou">
						<image :src="$func.showImg(item.avatar)" mode="scaleToFill" />
					</view>
					<view class="orders">
						<view class="order">
							<view class="nameX">{{item.nickname}}</view>
							<view class="dates">{{item.order_create_time}}</view>
						</view>
						<view class="what">{{item.title}}
						</view>
					</view>
				</view>
				<view class="how">+{{item.number}}</view>
			</view>

			<wanl-empty v-if="logList.length === 0"></wanl-empty>

			<view class="follow" @click="getLog()">点击展开更多接龙记录</view>
		</view>
		<view class="bottom">
			<view class="left" @tap="gotoDetail()">
				<uv-icon name="file-text" color="#999999" size="28"></uv-icon>
				<text>订单中心</text>
			</view>
			<view class="midlle">应付金额 <text>￥</text> <span>{{goodsData.price}}</span> </view>
			<view class="kacha">
				<image src="../../static/images/supermarket/shand@2x.png" mode="scaleToFill" />
			</view>
			<view class="last" @tap="SubmitData('placeOrder')">我要接龙</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal()">
			<view class="cu-dialog" @tap.stop="">
				<view class="option wanl-modal">
					<view class="head text-left padding-bj solid-bottom">
						<view class="cu-avatar radius-bock margin-right"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')' }">
						</view>

						<view>
							<view class="text-price wanl-orange text-xl margin-bottom-xs">
								{{ selectshop.price || goodsData.interval_price }}
							</view>
							<view v-if="selectArr.join('')" class="wanl-gray margin-bottom-xs">
								库存 <text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text> 件
							</view>
							<view class="text-sm">
								<view v-if="selectArr.join('')">
									<text class="margin-right-bj">已选择</text>
									<text class="margin-right-xs" v-for="(name, key) in selectArr"
										:key="key">{{ $base64.decode(name) }}</text>
								</view>
								<view v-else>
									请选择：
									<text class="wanl-gray-light" v-for="(item, index) in goodsData.spu" :key="item.id">
										<block v-if="index != 0">-</block>
										{{ $base64.decode(item.name) }}
									</text>
								</view>
							</view>
						</view>

						<view class="close wlIcon-31guanbi" @tap="hideModal()"></view>
					</view>
					<!-- 1.0.8升级 -->
					<scroll-view scroll-y="true" :style="{maxHeight: wanlsys.screenHeight / 2 + 'px'}">
						<view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu"
							:key="value.id">
							<view class="text-df">{{ value.name }}</view>
							<view class="tag">
								<view class="cu-tag text-sm" v-for="(item, index) in value.item" :key="index"
									:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
									@tap="skuClick(item, spukey, $event, index)">
									{{ $base64.decode(item.name) }}
								</view>
							</view>
						</view>
						<view class="number padding-bj">
							<view class="text-df">购买数量</view>
							<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum" :disabled="canCount"
								@change="changeNum"></uni-number-box>
						</view>
					</scroll-view>

					<view class="foot padding-lr-bj">
						<button v-if="isChoice" class="cu-btn bg-gradual-orange round text-bold complete"
							@tap="completeSelection">完成</button>
						<block v-else>
							<button class="cu-btn bg-gradual-yellow round-left text-bold"
								@tap="SubmitData('addToCart', 1)">加入购物车</button>
							<button class="cu-btn bg-gradual-orange round-right text-bold"
								@tap="SubmitData('placeOrder', 1)">立即订购</button>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-button" @click="navigateHome" v-if="xuanfu">
		      <image src="../../static/images/zhuye.png" class="icon"></image>
		</view>
	</view>
</template>

<script>
	import wanlshop_config from '@/common/config/config';
	import {
		mapState
	} from 'vuex';
	import uParse from "@/components/uParse/uParse.vue";
	export default {
		components: {
			uParse

		},
		data() {
			return {
				xuanfu:false,
				isExpanded: !this.isFollowed, // 如果未关注，则默认展开
				value: 0,

				id: 0,
				goodsData: {},

				logList: [],
				logPage: 1,
				logTotalPage: 1,

				poster: '',

				goods_id: 0,
				TabCur: 0,
				wanlsys: {},
				modalName: null, // 弹出层
				durect: 0, // 角标
				headerOpacity: 0, //不透明度
				currentSwiper: 0, // 轮播图右下角数字
				anchorlist: [{
					name: '主图',
					top: 0
				}, {
					name: '评价',
					top: 0
				}, {
					name: '详情',
					top: 0
				}, {
					name: '推荐',
					top: 0
				}], //导航条锚点
				selectAnchor: 0,
				// 猜你喜欢
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				// 商品规格组合
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				scrollAnimation: 100, //分享滚动
				pagesNum: 0, //1.1.9 升级 页面数量

				isShowAllImage: false,
			};
		},
		onLoad(options) {
			this.xuanfu = options.type
			this.id = options.id
			this.getGoods()
		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
			...mapState(['cart', 'common'])
		},
		methods: {
			touchStart(e) {
				this.startX = e.touches[0].pageX;
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				this.moveX = e.touches[0].pageX - this.startX;
				this.moveY = e.touches[0].pageY - this.startY;
				this.buttonTop += this.moveY;
				this.buttonLeft += this.moveX;
				this.startX = e.touches[0].pageX;
				this.startY = e.touches[0].pageY;
			},
			touchEnd() {
				// Save the final position if needed
			},
			handleClick() {
				// Your logic here
				uni.navigateTo({
					url: '/pages/somepage/somepage'
				});
			},
			follow(item) {
				uni.request({
					url: "/wanlshop/find/user/setFindUser",
					method: "POST",
					data: {
						id: item.shop.find_user.user_no,
						type: 'follow'
					},
					success: res => {
						item.shop.isFollow = res.data.data
						console.log('-=-=-=res', res)
						for (let i of this.list) {
							if (i.shop_id == item.shop_id) {
								i.shop.isFollow = res.data.data
							}
						}
					}
				})
			},
			toShopDetail(shop_id) {
				uni.navigateTo({
					url: '/pages/shop/index?id=' + shop_id
				})
			},
			gotoDetail() {
				uni.navigateTo({
					url: '/pages/user/order/order?state=0'
				})
			},
			toggleFollow(item) {
				console.log(3211111111);
				this.follow(item)
				this.isFollowed = !this.isFollowed;
				this.isExpanded = !this.isFollowed;
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			valChange(e) {
				console.log("当前值为: " + e.value);
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open();
			},
			getGoods() {
				uni.request({
					url: '/wanlshop/product/goods',
					data: {
						id: this.id,
					},
					success: res => {
						this.goodsData = res.data
						console.log('-=-=-=res', res)
						this.getLog()
						this.getPoster()

						this.goodsData = res.data;
						// 商品规格组合
						this.goodsData.spu.map(item => {
							// 1.1.3升级
							item.item.map((name, key, arr) => {
								arr[key].name = this.$base64.encode(arr[key].name)
							});
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						// 1.1.3升级
						this.goodsData.sku.map(item => {
							item.difference.map((name, index, arr) => {
								arr[index] = this.$base64.encode(name)
							});
						});
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
						// 计算锚点高度
						// setTimeout(() => {
						// 	this.calcAnchor();
						// }, 1000);
					}
				})
			},
			getPoster() {
				uni.request({
					url: '/wanlshop/product/groupShareImg',
					data: {
						good_id: this.goodsData.id
					},
					success: res => {
						this.poster = res.data
						console.log('=-=-=res', res)
					}
				})
			},
			getLog() {
				if (this.logPage > this.logTotalPage) return this.$func.msg('没有更多啦')

				uni.request({
					url: '/wanlshop/product/buyGroupList',
					data: {
						page: this.logPage,
						good_id: this.goodsData.id
					},
					success: res => {
						let list = res.data.data
						if (this.logPage > 1) {
							list = this.logList.concat(list)
						}
						this.logList = list
						this.logTotalPage = res.data.last_page || 1
						this.logPage++
					}
				})
			},
			copyShareUrl() {
				let url = wanlshop_config.cdnurl + '/tuangou/#/pages/productDetail/productDetail?id=' + this.goodsData.id +
					'&type=xuanfu'
				this.$func.copy(url)
			},

			// 提交数据
			SubmitData(name, type) {
				// if (!this.subIndex[0]) {
				// this.$wanlshop.msg('客官先别急，系统还在加载');
				// } else {

				// }
				if (type == 1) {
					if (this.canCount) {
						this.$wanlshop.msg('请选择完成规格');
					} else {
						this.isChoice = name;
						this.ProcessingData();
					}
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			ProcessingData() {
				if (this.isChoice == 'addToCart') {
					this.$store.dispatch('cart/add', {
						shop_id: this.goodsData.shop_id,
						shop_name: this.goodsData.shop.shopname,
						goods_id: this.goodsData.id,
						title: this.goodsData.title,
						number: this.selectNum,
						image: this.goodsData.image,
						sku: this.selectshop,
						sku_id: this.selectshop.id,
						sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum)
					});
					this.$wanlshop.msg('已加购物车');
				} else if (this.isChoice == 'placeOrder') {
					let goodsData = [{
						goods_id: this.goodsData.id,
						number: this.selectNum,
						sku_id: this.selectshop.id,
					}];
					// 提交订单
					if (this.$store.state.user.isLogin) {
						uni.redirectTo({
							url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}&from=${this.goodsData.delivery_method}`
						});
					} else {
						this.$wanlshop.to('/pages/user/auth/auth');
					}

				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				if (value.ishow) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						// 1.1.3升级
						this.selectshop.difference.map((name, index, arr) => {
							arr[index] = this.$base64.decode(name)
						})
						this.loadStock(this.selectshop.id);
						this.selectNum = 1;
					}
				}
			},

			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					// 强制关闭海报
					if (this.modalName == 'share') {
						this.$refs.wanlShare.closePoster();
					}
					this.modalName = null;
				}
			},

			async loadStock(sku_id) {
				await uni.request({
					url: '/wanlshop/product/stock',
					data: {
						sku_id: sku_id
					},
					success: res => {
						this.selectshop.stock = res.data;
					}
				});
			},
			navigateHome() {
			    
			      uni.switchTab({
			        url: '/pages/index'
			      });
			    },
			//计算有多小种可选路径
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
			},
			//商品规格修改数量
			changeNum(val) {
				if (this.selectshop.stock) {
					let num = parseInt(val);
					if (num > this.selectshop.stock) {
						this.$wanlshop.msg(`数量不能超过库存 ${this.selectshop.stock} 件`);
						this.selectNum = parseInt(this.selectshop.stock);
					} else {
						this.selectNum = parseInt(val);
					}
				}
			},
			checkInpath(clickIndex) {

				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			//计算锚点高度
			calcAnchor() {
				let query = null;
				// 支付宝小程序不能加后面的.in(this)，是它自身的限制
				// #ifndef MP-ALIPAY
				query = uni.createSelectorQuery().in(this)
				// #endif
				// #ifdef MP-ALIPAY
				query = uni.createSelectorQuery()
				// #endif
				query.select('#evaluate').boundingClientRect(rec => {
					this.anchorlist[1].top = rec.top - this.wanlsys.height - 45;
				}).exec();
				query.select('#details').boundingClientRect(rec => {
					this.anchorlist[2].top = rec.top - this.wanlsys.height - 45;
				}).exec();
				query.select('#recommend').boundingClientRect(rec => {
					this.anchorlist[3].top = rec.top - this.wanlsys.height - 45;
				}).exec();
			},

			// 完成选择
			completeSelection() {
				if (this.canCount) {
					this.$wanlshop.msg('请选择完成规格');
				} else {
					this.ProcessingData();
				}
			},
		},
	};
</script>

<style lang='scss' scoped>
	.pages {
		/* height: 300vh; */
		padding-bottom: 140rpx;
		background: #f6f6f6;

		.two {
			background: #ffffff;
			padding: 30rpx 35rpx 0rpx 35rpx;
			position: relative;
			z-index: 1;

			.wrap-show-img-bg {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 100rpx;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 2;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tops {
				background: #f6f6f6;
				border-radius: 15rpx;
				padding: 20rpx 25rpx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 15rpx;
						}

						.name {
							font-size: 34rpx;
							color: #121212;
							margin-left: 25rpx;
							font-weight: 500;
						}
					}

					.right {
						.love {
							width: 124rpx;
							height: 48rpx;
							line-height: 48rpx;
							background: #e60013;
							border-radius: 10rpx;
							font-size: 26rpx;
							color: #ffffff;
							text-align: center;
							font-weight: 500;
							margin-bottom: 10rpx;
							transition: all 0.3s ease; // 添加过渡效果
						}

						.followed {
							background: #ffffff;
							border: 1px solid #e60013;
							color: #e60013;
						}

						.share {
							width: 124rpx;
							height: 50rpx;
							line-height: 50rpx;
							border: 1px solid #e60013;
							border-radius: 10rpx;
							font-size: 26rpx;
							color: #e60013;
							text-align: center;
						}

						.popup {
							.pops {
								padding: 30rpx;

								>image {
									width: 100%;
									height: 850rpx;
								}

								.peo {
									display: flex;
									align-items: center;
									margin-bottom: 20rpx;

									image {
										width: 100rpx;
										height: 100rpx;
										border-radius: 50%;
										margin-right: 20rpx;
									}

									.prdt {
										p {
											font-weight: 400;
											font-size: 28rpx;
											color: #333333;
										}

										text {
											font-weight: 400;
											font-size: 26rpx;
											color: #888888;
										}
									}
								}

								.bigimg {
									width: 100%;
									height: 500rpx;
									margin-bottom: 20rpx;

									image {
										width: 100%;
										height: 100%;
										border-radius: 10rpx;
									}
								}

								.bots {
									.bot {
										text {
											font-weight: 400;
											font-size: 28rpx;
											color: #333333;
										}

										.twos {
											display: flex;
											align-items: center;
											justify-content: space-between;
											margin: 15rpx 0;

											.lfs {
												text {
													font-weight: bold;
													font-size: 28rpx;
													color: #e60013;

													span {
														font-size: 36rpx;
													}
												}

												p {
													font-weight: 400;
													font-size: 24rpx;
													color: #888888;
													margin: 15rpx 0;
												}
											}
										}
									}
								}

								.bottons {
									margin-top: -20rpx;
									padding: 20rpx 0;
									display: flex;
									justify-content: space-around;
									align-items: center;
									background-color: rgb(238, 215, 185);

									.btn1 {
										width: 260rpx;
										height: 80rpx;
										line-height: 80rpx;
										background: #221815;
										border-radius: 10rpx;
										font-weight: bold;
										font-size: 32rpx;
										color: #ffffff;
										text-align: center;
									}

									.btn2 {
										width: 260rpx;
										height: 80rpx;
										line-height: 80rpx;
										background: #f23030;
										border-radius: 10rpx;
										font-weight: bold;
										font-size: 32rpx;
										color: #ffffff;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}

			.contents {
				margin: 25rpx 0;

				.title {
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					margin-bottom: 15rpx;
				}

				.times {
					font-weight: 400;
					font-size: 22rpx;
					color: #e60013;
					margin-bottom: 25rpx;
				}

				.content {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.pictures {
			padding: 0 35rpx 0 35rpx;
			background: #ffffff;
			margin-bottom: 35rpx;

			.imgs {
				position: relative;

				.showimg {
					width: 100%;
					height: 850rpx;
					margin-bottom: 22rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.unshowimg {
					width: 100%;
					height: 500rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.showtext {
					text-align: center;
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #ffffff;
					background: #333;
					opacity: 0.75;
					position: absolute;
					left: 0;
					bottom: 0;
					transition: all 0.3s ease; // 添加过渡效果

					&.expanded {
						bottom: auto;
						top: calc(100% - 100rpx);
					}
				}
			}
		}

		.products {
			background: #ffffff;
			padding: 30rpx 35rpx;

			.names {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				padding-bottom: 35rpx;
			}

			.product {
				display: flex;

				image {
					width: 218rpx;
					height: 218rpx;
					border-radius: 15rpx;
					margin-right: 30rpx;
				}

				.compute {
					.tits {
						font-weight: bold;
						font-size: 32rpx;
						color: #121212;
					}

					.info {
						font-weight: 400;
						font-size: 28rpx;
						color: #888888;
						margin: 12rpx 0 30rpx 0;
					}

					.buy {
						display: flex;
						justify-content: space-between;

						.prc {
							font-weight: bold;
							font-size: 26rpx;
							color: #e60013;

							span {
								font-size: 32rpx;
							}
						}
					}
				}
			}
		}

		.history {
			background: #ffffff;
			margin-top: 30rpx;
			padding: 30rpx 35rpx;

			.tit {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				padding-bottom: 35rpx;
			}

			.infos {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.nums {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				.people {
					display: flex;
					width: 100%;

					.tou {
						image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							margin: 0 20rpx;
						}
					}

					.orders {
						width: 100%;

						.order {
							display: flex;
							justify-content: space-between;
							margin-bottom: 12rpx;

							.nameX {
								font-weight: 400;
								font-size: 28rpx;
								color: #888888;
							}

							.dates {
								font-weight: 500;
								font-size: 28rpx;
								color: #888888;

								span {
									margin-left: 10rpx;
								}
							}
						}

						.what {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
				}

				.how {
					font-weight: 500;
					font-size: 30rpx;
					color: #e60013;
					margin: 46rpx 0 0 10rpx;
				}
			}

			.follow {
				text-align: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.bottom {
			position: relative;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 120rpx;

			.left {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				flex: 1;
				padding: 0 40rpx 0 40rpx;
			}

			.midlle {
				background: #221815;
				color: #ffffff;
				line-height: 120rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				flex: 3;
				padding-left: 30rpx;

				text {
					margin: 0 10rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #ffffff;
				}

				span {
					font-weight: bold;
					font-size: 32rpx;
					color: #ffffff;
				}
			}

			.kacha {
				//定位在中间
				position: absolute;
				top: 50%;
				left: 72%;
				transform: translate(-50%, -50%);
				z-index: 999;
				width: 40rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.last {
				background: #e60013;
				font-weight: bold;
				font-size: 34rpx;
				color: #ffffff;
				line-height: 120rpx;
				flex: 2;
				text-align: center;
			}
		}


		.wrap-image-list {
			width: 100%;

			.img-item {
				width: 100%;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0rpx;
				}
			}
		}
	}
	.fixed-button {
	  position: fixed;
	  right: 10px; 
	  top: 50%; 
	  transform: translateY(-60%); 
	  z-index: 1000; 
	}
	
	.icon {
	  width: 50px;
	  height: 50px;
	}
</style>